
<!DOCTYPE html>
<html lang="">


<head><meta name="generator" content="Hexo 3.8.0">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
  <meta name="theme-color" content="#202020">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <script src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js" async></script>
  
  
    <meta name="keywords" content>
  

  
    <meta name="description" content="第十五章 CSS基础">
  
  
  
  <link rel="icon" type="image/x-icon" href="/images/footer-logo.png">
  
  <title>第十五章 CSS基础 [ 51AIOps 专注于运维自动化  微信： kaipython ]</title>
  
    <!-- stylesheets list from config.yml -->
    
      <link rel="stylesheet" href="//cdn.bootcss.com/pure/1.0.0/pure-min.css">
    
      <link rel="stylesheet" href="/css/xoxo.css">
    
  
</head>


<body>
  <div class="nav-container">
    <nav class="home-menu pure-menu pure-menu-horizontal">
  <a class="pure-menu-heading" href="/">
    
    <span class="title" style="text-transform:none">51AIOps 专注于运维自动化  微信： kaipython</span>
  </a>

  <ul class="pure-menu-list clearfix">
      
          
            
              <li class="pure-menu-item"><a href="/" class="pure-menu-link">首页</a></li>
            
          
      
  </ul>
   
</nav>

  </div>

  <div class="container" id="content-outer">
    <div class="inner" id="content-inner" style='margin-left:-68px!important'>
      <div class="post-container">
  <article class="post" id="post">
    <header class="post-header text-center">
      <h1 class="title">
        第十五章 CSS基础
      </h1>
      <span>
        
        <time class="time" datetime="2017-05-07T11:55:09.000Z">
        2017-05-07
      </time>
        
      </span>
      <span class="slash">/</span>
      <span class="post-meta">
      <span class="post-tags">
        
      </span>
    </span>
      <span class="slash">/</span>
      <span class="read">
      <span id="busuanzi_value_page_pv"></span> 点击
    </span>
      <span class="slash">/</span>
    </header>

    <div class="post-content">
      <h4 id="网页布局的三个阶段和CSS的基本概念"><a href="#网页布局的三个阶段和CSS的基本概念" class="headerlink" title="网页布局的三个阶段和CSS的基本概念"></a><div id="title">网页布局的三个阶段和CSS的基本概念</div></h4><ol>
<li><strong>网页布局的三个阶段</strong></li>
</ol>
<ul>
<li>table网页设计        内容和样式(外观和布局)混合</li>
<li>table+css网页设计     table布局,css指定外观</li>
<li>div+css网页设计    div放内容,css指定样式(外观和布局),                内容和样式彻底分离</li>
</ul>
<ol start="2">
<li><strong>CSS的基本概念</strong></li>
</ol>
<blockquote>
<p>CSS（cascading style sheet，层叠样式表)是一种制作网页的新技术，现在已经为大多数浏览器所支持，成为网页设计必不可少的工具之一</p>
</blockquote>
<ol start="3">
<li><strong>CSS的优点</strong></li>
</ol>
<ul>
<li>使网页代码更少，网页下载更快</li>
<li>实现了内容与样式的分离，使网站维护更快捷</li>
<li>使网页与浏览器的兼容性更好</li>
</ul>
<hr>
<h4 id="CSS的语法结构"><a href="#CSS的语法结构" class="headerlink" title="CSS的语法结构"></a><div id="title">CSS的语法结构</div></h4><blockquote>
<p>每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束</p>
</blockquote>
<p><img src="https://s2.ax1x.com/old/FZSFP.png" alt="FZSFP.png"></p>
<p><strong><font color="red">注意：在CSS中，选择器是非常重要的，它制定了对哪些元素进行样式设置</font></strong></p>
<hr>
<h4 id="CSS的三种引入方式"><a href="#CSS的三种引入方式" class="headerlink" title="CSS的三种引入方式"></a><div id="title">CSS的三种引入方式</div></h4><ol>
<li><strong>行内样式</strong></li>
</ol>
<blockquote>
<p>它是所有样式方法中最为直接的一种，它直接对HTML的标签使用<font color="red">style属性</font>，
然后将css代码直接写在其中</p>
</blockquote>
<figure class="highlight htmlbars"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">p</span> <span class="attr">style</span>=<span class="string">"color:#ff0000; font-size:20px; "</span>&gt;</span>正文内容 1<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span></span><br><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">p</span> <span class="attr">style</span>=<span class="string">"color:#000000; font-style:italic;"</span>&gt;</span>正文内容 2<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span></span><br><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">p</span> <span class="attr">style</span>=<span class="string">"color:#ff00ff; font-size:25px; "</span>&gt;</span>正文内容 3<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span></span><br></pre></td></tr></table></figure>

<ol start="2">
<li><strong>内部样式</strong></li>
</ol>
<blockquote>
<p>内部样式就是将css写在<head><meta name="generator" content="Hexo 3.8.0">与</head>之间，并且用<style>和</style>标签进行声明</p>
</blockquote>
<figure class="highlight htmlbars"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">style</span> <span class="attr">type</span>=<span class="string">"text/css"</span>&gt;</span></span></span><br><span class="line"><span class="xml">    p&#123;</span></span><br><span class="line"><span class="xml">       	color:#0000ff;</span></span><br><span class="line"><span class="xml">    	text-decoration:underline;</span></span><br><span class="line"><span class="xml">    	font-weight:bold;</span></span><br><span class="line"><span class="xml">    	font-size:25px;</span></span><br><span class="line"><span class="xml">    &#125;</span></span><br><span class="line"><span class="xml"> <span class="tag">&lt;/<span class="name">style</span>&gt;</span></span></span><br><span class="line"><span class="xml"> </span></span><br><span class="line"><span class="xml"> <span class="tag">&lt;<span class="name">p</span>&gt;</span>这是第1行正文内容......<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span></span><br><span class="line"><span class="xml"> <span class="tag">&lt;<span class="name">p</span>&gt;</span>这是第2行正文内容......<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span></span><br><span class="line"><span class="xml"> <span class="tag">&lt;<span class="name">p</span>&gt;</span>这是第3行正文内容......<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span></span><br></pre></td></tr></table></figure>

<ol start="3">
<li><strong>外部样式</strong></li>
</ol>
<blockquote>
<p>外部样式就是将css写在一个单独的文件中，然后在页面进行引入即可</p>
</blockquote>
<figure class="highlight htmlbars"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span></span><br><span class="line"><span class="xml">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>页面标题<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span></span><br><span class="line"><span class="xml">    <span class="tag">&lt;<span class="name">link</span> <span class="attr">href</span>=<span class="string">"07-07.css"</span> <span class="attr">type</span>=<span class="string">"text/css"</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span>&gt;</span></span></span><br><span class="line"><span class="xml"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span></span><br><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">h2</span>&gt;</span>CSS标题<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">p</span>&gt;</span>这是正文内容……<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span></span><br><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">h2</span>&gt;</span>CSS标题<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">p</span>&gt;</span>这是正文内容……<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span></span><br></pre></td></tr></table></figure>

<hr>
<h4 id="CSS常见选择器"><a href="#CSS常见选择器" class="headerlink" title="CSS常见选择器"></a><div id="title">CSS常见选择器</div></h4><ol>
<li><strong>标签选择器</strong></li>
</ol>
<p><img src="https://s2.ax1x.com/old/FZ9W8.png" alt="FZ9W8.png"></p>
<figure class="highlight htmlbars"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span></span><br><span class="line"><span class="xml">h1&#123;</span></span><br><span class="line"><span class="xml">   color:red;</span></span><br><span class="line"><span class="xml">   font-size:25px;</span></span><br><span class="line"><span class="xml">&#125;</span></span><br><span class="line"><span class="xml"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span></span><br><span class="line"><span class="xml"></span></span><br><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">h1</span>&gt;</span>fuck alex<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span></span><br></pre></td></tr></table></figure>

<ol start="2">
<li><strong>ID选择器</strong></li>
</ol>
<p><img src="https://s2.ax1x.com/old/FZPSS.png" alt="FZPSS.png"></p>
<figure class="highlight htmlbars"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">style</span> <span class="attr">type</span>=<span class="string">"text/css"</span>&gt;</span></span></span><br><span class="line"><span class="xml">       #bold&#123;</span></span><br><span class="line"><span class="xml">           font-weight:30px;</span></span><br><span class="line"><span class="xml">       &#125;</span></span><br><span class="line"><span class="xml">       #green&#123;</span></span><br><span class="line"><span class="xml">           font-size:30px;</span></span><br><span class="line"><span class="xml">           color:#009900；</span></span><br><span class="line"><span class="xml">      &#125;</span></span><br><span class="line"><span class="xml"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span></span><br><span class="line"><span class="xml"></span></span><br><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">p</span> <span class="attr">id</span>=<span class="string">"bold"</span>&gt;</span>ID选择器1<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span></span><br><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">p</span> <span class="attr">id</span>=<span class="string">"green"</span>&gt;</span>ID选择器2<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span></span><br><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">p</span> <span class="attr">id</span>=<span class="string">"green"</span>&gt;</span>ID选择器3<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span></span><br><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">p</span> <span class="attr">id</span>=<span class="string">"bold green"</span>&gt;</span>ID选择器4<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span></span><br></pre></td></tr></table></figure>

<ol start="3">
<li><strong>类别选择器</strong></li>
</ol>
<p><img src="https://s2.ax1x.com/old/FZiQg.png" alt="FZiQg.png"></p>
<figure class="highlight htmlbars"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="xml"><span class="tag">&lt; <span class="attr">style</span> <span class="attr">type</span>=<span class="string">"text/css"</span>&gt;</span></span></span><br><span class="line"><span class="xml">      .red&#123;</span></span><br><span class="line"><span class="xml">          color:red;</span></span><br><span class="line"><span class="xml">          font-size:18px;</span></span><br><span class="line"><span class="xml">      &#125;</span></span><br><span class="line"><span class="xml">     .green&#123;</span></span><br><span class="line"><span class="xml">         color:green;</span></span><br><span class="line"><span class="xml">         font-size:20px;</span></span><br><span class="line"><span class="xml">      &#125;</span></span><br><span class="line"><span class="xml"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span></span><br><span class="line"><span class="xml"></span></span><br><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">p</span> <span class="attr">class</span>=<span class="string">"red"</span>&gt;</span>css选择器1<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span></span><br><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">p</span> <span class="attr">class</span>=<span class="string">"green"</span>&gt;</span>css选择器2<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span></span><br><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">h3</span> <span class="attr">class</span>=<span class="string">"green"</span>&gt;</span>h3同样适用<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span></span><br></pre></td></tr></table></figure>

<ol start="4">
<li><strong>通用选择器</strong></li>
</ol>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">* &#123;<span class="attribute">margin</span>:<span class="number">0</span>;<span class="attribute">padding</span>:<span class="number">0</span>;&#125;</span><br></pre></td></tr></table></figure>

<ol start="5">
<li><strong>包含选择器</strong></li>
</ol>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span> <span class="selector-tag">p</span> &#123;<span class="attribute">background</span>:red;&#125;</span><br></pre></td></tr></table></figure>

<ol start="6">
<li><strong>分组选择器</strong></li>
</ol>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span>, <span class="selector-tag">span</span>, <span class="selector-tag">h1</span> &#123;<span class="attribute">color</span>:blue;&#125;</span><br></pre></td></tr></table></figure>

<ol start="7">
<li><strong>伪类选择器</strong></li>
</ol>
<blockquote>
<p>:link      定义超链接默认样式<br>:visited    定义访问过的样式<br>:hover     定义鼠标经过的样式<br>:active     定义鼠标按下的样式</p>
</blockquote>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">a</span><span class="selector-pseudo">:link</span> &#123; <span class="attribute">color</span>:<span class="number">#ff0000</span>; &#125;  <span class="comment">/*默认样式，超链接文字为红色*/</span></span><br><span class="line"><span class="selector-tag">a</span><span class="selector-pseudo">:visited</span> &#123; <span class="attribute">color</span>:<span class="number">#00ff00</span>; &#125;  <span class="comment">/*访问过后，超链接文字为绿色*/</span></span><br><span class="line"><span class="selector-tag">a</span><span class="selector-pseudo">:hover</span> &#123; <span class="attribute">color</span>:<span class="number">#0000ff</span>; &#125;  <span class="comment">/*鼠标经过，超链接文字为蓝色*/</span></span><br><span class="line"><span class="selector-tag">a</span><span class="selector-pseudo">:active</span> &#123; <span class="attribute">color</span>:<span class="number">#ffff00</span>; &#125;  <span class="comment">/*鼠标按下时，超链接文字为黄色*/</span></span><br></pre></td></tr></table></figure>

<ol start="8">
<li><strong>选择器的优先级</strong></li>
</ol>
<blockquote>
<p>行内样式 &gt; id选择器 &gt; 类选择器 &gt; 标签选择器 &gt; 通用选择器</p>
</blockquote>
<figure class="highlight htmlbars"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">style</span> <span class="attr">type</span>=<span class="string">"text/css"</span>&gt;</span></span></span><br><span class="line"><span class="xml">    #show1&#123;color:gold;&#125;</span></span><br><span class="line"><span class="xml">    .show &#123;color:pink;&#125;</span></span><br><span class="line"><span class="xml">    h1 &#123;color:red;&#125;</span></span><br><span class="line"><span class="xml">    * &#123;color:green;&#125;</span></span><br><span class="line"><span class="xml"> <span class="tag">&lt;/<span class="name">style</span>&gt;</span></span></span><br><span class="line"><span class="xml"> <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span></span><br><span class="line"><span class="xml"> <span class="tag">&lt;<span class="name">body</span>&gt;</span></span></span><br><span class="line"><span class="xml"> 	<span class="tag">&lt;<span class="name">h1</span> <span class="attr">id</span>=<span class="string">"show1"</span> <span class="attr">class</span>=<span class="string">"show"</span> <span class="attr">style</span>=<span class="string">"color:gray;"</span>&gt;</span>优先级测试<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span></span><br><span class="line"><span class="xml"> <span class="tag">&lt;/<span class="name">body</span>&gt;</span></span></span><br></pre></td></tr></table></figure>

<hr>
<h4 id="段落-文本-属性和边框以及背景属性"><a href="#段落-文本-属性和边框以及背景属性" class="headerlink" title="段落(文本)属性和边框以及背景属性"></a><div id="title">段落(文本)属性和边框以及背景属性</div></h4><ol>
<li>文本的行高 — line-height</li>
</ol>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">line-height</span>：行高值(像素)</span><br></pre></td></tr></table></figure>

<ol start="2">
<li>文本对齐 — text-align</li>
</ol>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">text-align : left / right / center</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">left</span>：左对齐；</span><br><span class="line"><span class="selector-tag">right</span>：右对齐</span><br><span class="line"><span class="selector-tag">center</span>：居中对齐</span><br></pre></td></tr></table></figure>

<ol start="3">
<li>边框设置 — border</li>
</ol>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">宽度，样式，颜色  (<span class="selector-tag">border</span>: 1<span class="selector-tag">px</span> <span class="selector-tag">solid</span> <span class="selector-tag">red</span>;)</span><br></pre></td></tr></table></figure>

<ol start="4">
<li>文字属性</li>
</ol>
<blockquote>
<p>字号：font-size<br>语法：font-size：大小的取值(像素值)</p>
</blockquote>
<blockquote>
<p>文字颜色：color<br>语法：Color：颜色取值</p>
</blockquote>
<blockquote>
<p>   color:#292378;      //6个十六进制数获得颜色<br>   color:#A64;     //#AA6644的缩写<br>   color:red;        //颜色关键字定义颜色<br>   color:rgb(100,159,170);   //rgb定义颜色</p>
</blockquote>
<p><strong>tips: chrome控制台可以获取你想要的颜色</strong></p>
<ol start="5">
<li>背景属性</li>
</ol>
<p><strong>背景颜色 —- background-color</strong></p>
<blockquote>
<p>关键字：red pink orange </p>
</blockquote>
<p><strong>背景图像 —- background-image</strong></p>
<blockquote>
<p>使用background-image属性可以设置元素的背景图像<br>语法：background-image：url（图像地址）</p>
</blockquote>
<div style="display:none">
**背景位置 ---- background-position**
>background-position-x : 200px;
>background-position-y : 100px;
</div>

<p><strong>背景重复 —- background-repeat</strong></p>
<blockquote>
<p>语法：background-repeat：取值</p>
</blockquote>
<blockquote>
<p>Repeat(默认)       背景图像平铺排满整个网页<br>repeat-x           背景图像只在水平方向上平铺；<br>repeat-y           背景图像只在垂直方向上平铺。<br>no-repeat          背景图像不平铺</p>
</blockquote>
<div style="display:none">
**使用背景属性的一个常见案例**

<blockquote>
<p>当我们的网站流量比较大的时候，我们一般在请求图片资源时，并不是一张一张的去请求，而是一整张的去请求，然后根据需求对图像进行截取，这样的话，能够减少网络的请求，节省大量的费用</p>
</blockquote>
<p><img src="https://s2.ax1x.com/old/FZFyQ.png" alt="FZFyQ.png"></p>
<figure class="highlight htmlbars"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span></span><br><span class="line"><span class="xml">    #myimg&#123;</span></span><br><span class="line"><span class="xml">        border:1px solid red;</span></span><br><span class="line"><span class="xml">        height:18px;</span></span><br><span class="line"><span class="xml">        width:18px;</span></span><br><span class="line"><span class="xml">        background-image:url('2.png');</span></span><br><span class="line"><span class="xml">        background-position-y:138px;</span></span><br><span class="line"><span class="xml">    &#125;</span></span><br><span class="line"><span class="xml"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span></span><br><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span></span><br><span class="line"><span class="xml">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"myimg"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="xml"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span></span><br></pre></td></tr></table></figure>

</div>

<h4 id="布局属性"><a href="#布局属性" class="headerlink" title=" 布局属性"></a><div id="title"> 布局属性</div></h4><p><strong><font color="red">注意：只有块级元素使用下列属性才有效<font></font></font></strong></p>
<p><strong>1. 外边距 – margin</strong></p>
<p><img src="https://s2.ax1x.com/old/FZkLj.png" alt="FZkLj.png"></p>
<blockquote>
<p>margin是对外元素的距离，用来控制元素本身的浮动位置</p>
</blockquote>
<p>margin的取值：</p>
<ul>
<li>四边距margin</li>
<li>上边距margin-top</li>
<li>下边距margin-bottom</li>
<li>左边距margin-left</li>
<li>右边距margin-right</li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">margin</span> 10<span class="selector-tag">px</span> 20<span class="selector-tag">px</span> 30<span class="selector-tag">px</span> 40<span class="selector-tag">px</span>;</span><br></pre></td></tr></table></figure>

<p>margin取值解释：</p>
<blockquote>
<p>提供一个，用于四边；<br>提供两个，第一个用于上－下，第二个用于左－右；<br>如果提供三个，第一个用于上，第二个用于左－右，第三个用于下；<br>提供四个参数值，将按上－右－下－左的顺序作用于四边；</p>
</blockquote>
<p><strong><font color="red">注意：margin: a auto — 居中显示</font></strong></p>
<p><strong>2. 内边距 – padding</strong></p>
<p><img src="https://s2.ax1x.com/old/FZVwn.png" alt="FZVwn.png"></p>
<blockquote>
<p>padding是对内元素，用来控制内部元素的位置</p>
</blockquote>
<p>padding的取值：</p>
<ul>
<li>四边距padding</li>
<li>上边距padding-top</li>
<li>下边距padding-bottom</li>
<li>左边距padding-left</li>
<li>右边距padding-right</li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">padding</span> 10<span class="selector-tag">px</span> 20<span class="selector-tag">px</span> 30<span class="selector-tag">px</span> 40<span class="selector-tag">px</span>;</span><br></pre></td></tr></table></figure>

<p>padding取值解释：</p>
<blockquote>
<p>提供一个，用于四边；<br>提供两个，第一个用于上－下，第二个用于左－右；<br>如果提供三个，第一个用于上，第二个用于左－右，第三个用于下；<br>提供四个参数值，将按上－右－下－左的顺序作用于四边；</p>
</blockquote>
<p><strong>3. 元素浮动 – float</strong></p>
<blockquote>
<p>float的取值：left, right, none(默认值)</p>
</blockquote>
<p><strong>3个div正常显示如下：</strong><br><img src="https://s2.ax1x.com/old/FZMSU.png" alt="FZMSU.png"></p>
<p><strong>如果想让3个div并排显示，就需要设置它们的float属性，如下是设置float:left;</strong></p>
<p><img src="https://s2.ax1x.com/old/FZQlF.png" alt="FZQlF.png"></p>
<p><strong>如下是设置第1个和第3个div向左浮动float:left;第2个div向右浮动float:right;</strong></p>
<p><img src="https://s2.ax1x.com/old/FZly4.png" alt="FZly4.png"></p>
<p><strong>因此我们想，如果有若干个div，都设置float:left,则会像流水一样排开</strong></p>
<p><img src="https://s2.ax1x.com/old/FZ1OJ.png" alt="FZ1OJ.png"></p>
<p><strong>看到这块以后，想必聪明的你也许想到了，各大电商网站上商品的展示不就是这个样子的吗，嗖嘎！</strong></p>
<p><img src="https://s2.ax1x.com/old/FZGwR.png" alt="FZGwR.png"></p>
<p><strong><font color="red">常见的banner头部的制作案例</font></strong></p>
<p><img src="https://s2.ax1x.com/old/FZ8m9.png" alt="FZ8m9.png"></p>
<figure class="highlight htmlbars"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">style</span>=<span class="string">"background-color:#f2f2f2;height:38px;line-height:38px;"</span>&gt;</span></span></span><br><span class="line"><span class="xml">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">style</span>=<span class="string">"width:980px; margin:0 auto;"</span>&gt;</span></span></span><br><span class="line"><span class="xml">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">style</span>=<span class="string">"float:left;font-size: 12px;"</span>&gt;</span>请登录<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="xml">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">style</span>=<span class="string">"float:right;"</span>&gt;</span></span></span><br><span class="line"><span class="xml">            <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>&gt;</span>我的淘宝<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span></span><br><span class="line"><span class="xml">            <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>&gt;</span>购物车<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span></span><br><span class="line"><span class="xml">            <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>&gt;</span>手机淘宝<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span></span><br><span class="line"><span class="xml">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="xml">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="xml">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">style</span>=<span class="string">"clear:both;"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="xml"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br></pre></td></tr></table></figure>

<p><strong>4. display属性</strong></p>
<ul>
<li>block：将元素变成块级标签，可以设置高度和宽度</li>
<li>inline：将元素变成行内标签，不能设置高度和宽度</li>
<li>inline-block：同时具有两种</li>
<li>none：标签消失</li>
</ul>
<figure class="highlight htmlbars"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">span</span> <span class="attr">style</span>=<span class="string">"background-color:gray;height:70px;width:20px;"</span>&gt;</span>行内标签<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span></span><br></pre></td></tr></table></figure>

<p><strong>5. overflow溢出处理属性</strong></p>
<ul>
<li>Overflow     (水平和垂直均设置)</li>
<li>Overflow-x    (设置水平方向)</li>
<li>Overflow-y    (设置垂直方向)</li>
</ul>
<p><strong>设置水平滚动条</strong></p>
<blockquote>
<p>overflow-x : scroll</p>
</blockquote>
<p><img src="https://s2.ax1x.com/old/FZJT1.png" alt="FZJT1.png"></p>
<p><strong>设置垂直方向滚动条</strong></p>
<blockquote>
<p>overflow-y : scroll</p>
</blockquote>
<p><img src="https://s2.ax1x.com/old/FZtFx.png" alt="FZtFx.png"></p>
<p><strong>6. 定位属性</strong></p>
<ul>
<li>fixed : 将某个元素固定在页面的某个位置</li>
<li>absolute :  绝对定位</li>
<li>relative：相对定位</li>
</ul>
<blockquote>
<p>定位方式通常与定位坐标一起使用<br>定位坐标：要定位的元素偏离目标位置多远的距离<br>常见取值：Top，left，right，bottom</p>
</blockquote>
<p><strong>1.fixed属性</strong></p>
<blockquote>
<p>将某个元素固定在页面的某个位置</p>
</blockquote>
<p>特点：</p>
<blockquote>
<p>相对于浏览器的窗口来进行定位的<br>固定到窗口的某个位置上，不随内容而滚动<br>如果不设置定位坐标，就在原来的位置，否则反之</p>
</blockquote>
<p>案例：</p>
<p><img src="https://s2.ax1x.com/old/FZdSO.png" alt="FZdSO.png"></p>
<p><strong>2.relative属性</strong></p>
<blockquote>
<p>相对定位</p>
</blockquote>
<p>特点：</p>
<blockquote>
<p>相对定位是相对于，自身的左上角为坐标点</p>
</blockquote>
<p><img src="https://s2.ax1x.com/old/FZ06e.png" alt="FZ06e.png"></p>
<p><strong>3.absolute属性</strong></p>
<blockquote>
<p>绝对定位</p>
</blockquote>
<p>特点：</p>
<blockquote>
<p>相对于（祖先元素的定位方式（relative）来进行定位 </p>
</blockquote>
<blockquote>
<p>找祖先元素是否有定位，如果没有定位，找到<code>&lt;body&gt;</code>，就相对body来定位<br>如果找到祖先元素有定位，相对祖先元素来定位</p>
</blockquote>
<p><img src="https://s2.ax1x.com/old/FZrmd.png" alt="FZrmd.png"></p>
<p><strong>简单的案例</strong></p>
<p><img src="https://s2.ax1x.com/old/FZs0A.png" alt="FZs0A.png"></p>
<blockquote>
<p>学会了这个定位属性之后，我们可以做出如下的效果</p>
</blockquote>
<p><img src="https://s2.ax1x.com/old/FZckt.png" alt="FZckt.png"></p>
<p><strong>7. z-index</strong></p>
<blockquote>
<p>设置对象的层叠顺序</p>
</blockquote>
<p>特点</p>
<blockquote>
<p>较大 number 值的对象会覆盖在较小 number 值的对象之上</p>
</blockquote>
<p><strong>浮层的效果</strong></p>
<figure class="highlight htmlbars"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">style</span>&gt;</span>  </span></span><br><span class="line"><span class="xml">    .one&#123;</span></span><br><span class="line"><span class="xml">        height:2000px;</span></span><br><span class="line"><span class="xml">        background-color: #dddddd;</span></span><br><span class="line"><span class="xml">    &#125;    </span></span><br><span class="line"><span class="xml">    .two&#123;</span></span><br><span class="line"><span class="xml">        height:2050px;</span></span><br><span class="line"><span class="xml">        background-color: #3ba354;</span></span><br><span class="line"><span class="xml">        position: fixed;</span></span><br><span class="line"><span class="xml">        top:0;</span></span><br><span class="line"><span class="xml">        right:0;</span></span><br><span class="line"><span class="xml">        left:0;</span></span><br><span class="line"><span class="xml">        opacity: 0.3;</span></span><br><span class="line"><span class="xml">        /*z-index:10;*/</span></span><br><span class="line"><span class="xml">    &#125;</span></span><br><span class="line"><span class="xml">    .three&#123;</span></span><br><span class="line"><span class="xml">        height:400px;</span></span><br><span class="line"><span class="xml">        width:300px;</span></span><br><span class="line"><span class="xml">        position: fixed;</span></span><br><span class="line"><span class="xml">        top:100px;</span></span><br><span class="line"><span class="xml">        right:400px;</span></span><br><span class="line"><span class="xml">        left:800px;</span></span><br><span class="line"><span class="xml">        background-color: white;</span></span><br><span class="line"><span class="xml">        z-index: 10;</span></span><br><span class="line"><span class="xml">    &#125;</span></span><br><span class="line"><span class="xml"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span></span><br><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span></span><br><span class="line"><span class="xml">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"one"</span>&gt;</span></span></span><br><span class="line"><span class="xml">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="xml">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"three"</span>&gt;</span></span></span><br><span class="line"><span class="xml">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="xml">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"two"</span>&gt;</span></span></span><br><span class="line"><span class="xml">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="xml"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span></span><br></pre></td></tr></table></figure>

<hr>
<p><strong>网站页面</strong></p>
<figure class="highlight htmlbars"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br></pre></td><td class="code"><pre><span class="line"><span class="xml"></span></span><br><span class="line"><span class="xml">    body&#123;</span></span><br><span class="line"><span class="xml">        background-color: #999999;</span></span><br><span class="line"><span class="xml">        margin:0;</span></span><br><span class="line"><span class="xml">    &#125;</span></span><br><span class="line"><span class="xml">    .pg-body&#123;</span></span><br><span class="line"><span class="xml">        background-color: white;</span></span><br><span class="line"><span class="xml">        border:1px solid orange;</span></span><br><span class="line"><span class="xml">        width: 770px;</span></span><br><span class="line"><span class="xml">        margin:0 auto;</span></span><br><span class="line"><span class="xml">    &#125;</span></span><br><span class="line"><span class="xml">    .item&#123;</span></span><br><span class="line"><span class="xml">        border:1px solid #dddddd;</span></span><br><span class="line"><span class="xml">        float: left;</span></span><br><span class="line"><span class="xml">        width:150px;</span></span><br><span class="line"><span class="xml">        margin:10px;</span></span><br><span class="line"><span class="xml">        padding:10px;</span></span><br><span class="line"><span class="xml">        position: relative;</span></span><br><span class="line"><span class="xml">    &#125;</span></span><br><span class="line"><span class="xml">    h2&#123;</span></span><br><span class="line"><span class="xml">        border:1px solid orange;</span></span><br><span class="line"><span class="xml">        height:48px;</span></span><br><span class="line"><span class="xml">        line-height: 48px;</span></span><br><span class="line"><span class="xml">        margin-top: 0;</span></span><br><span class="line"><span class="xml">        padding-left:15px;</span></span><br><span class="line"><span class="xml">        color:orange;</span></span><br><span class="line"><span class="xml">    &#125;</span></span><br><span class="line"><span class="xml">    p, span, u&#123;</span></span><br><span class="line"><span class="xml">        font-size: 12px;</span></span><br><span class="line"><span class="xml">        text-align: center;</span></span><br><span class="line"><span class="xml">    &#125;</span></span><br><span class="line"><span class="xml">    .item span&#123;</span></span><br><span class="line"><span class="xml">        color:red;</span></span><br><span class="line"><span class="xml">        margin-left: 30px;</span></span><br><span class="line"><span class="xml">    &#125;</span></span><br><span class="line"><span class="xml">    .hot&#123;</span></span><br><span class="line"><span class="xml">        position: absolute;</span></span><br><span class="line"><span class="xml">        top:0;</span></span><br><span class="line"><span class="xml">        right:0;</span></span><br><span class="line"><span class="xml">    &#125;</span></span><br><span class="line"><span class="xml"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span></span><br><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span></span><br><span class="line"><span class="xml">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"pg-body"</span>&gt;</span></span></span><br><span class="line"><span class="xml">        <span class="tag">&lt;<span class="name">h2</span>&gt;</span>限时抢购<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line"><span class="xml">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"item"</span>&gt;</span></span></span><br><span class="line"><span class="xml">            <span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">"images/01.jpg"</span> <span class="attr">alt</span>=<span class="string">""</span>&gt;</span></span></span><br><span class="line"><span class="xml">            <span class="tag">&lt;<span class="name">p</span>&gt;</span>[特价款]雷朋板材光学镜架 <span class="tag">&lt;<span class="name">br</span>&gt;</span></span></span><br><span class="line"><span class="xml">            年终盛典 满128减30元<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span></span><br><span class="line"><span class="xml">            <span class="tag">&lt;<span class="name">span</span>&gt;</span>¥476.00<span class="tag">&lt;/<span class="name">span</span>&gt;</span> <span class="tag">&lt;<span class="name">u</span>&gt;</span>¥1360<span class="tag">&lt;/<span class="name">u</span>&gt;</span></span></span><br><span class="line"><span class="xml">            <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"hot"</span>&gt;</span></span></span><br><span class="line"><span class="xml">                <span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">"images/xsq.png"</span> <span class="attr">alt</span>=<span class="string">""</span>&gt;</span></span></span><br><span class="line"><span class="xml">            <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="xml">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="xml">            年终盛典 满128减30元<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span></span><br><span class="line"><span class="xml">            <span class="tag">&lt;<span class="name">span</span>&gt;</span>¥476.00<span class="tag">&lt;/<span class="name">span</span>&gt;</span> <span class="tag">&lt;<span class="name">u</span>&gt;</span>¥1360<span class="tag">&lt;/<span class="name">u</span>&gt;</span></span></span><br><span class="line"><span class="xml">            <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"hot"</span>&gt;</span></span></span><br><span class="line"><span class="xml">                <span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">"images/xsq.png"</span> <span class="attr">alt</span>=<span class="string">""</span>&gt;</span></span></span><br><span class="line"><span class="xml">            <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="xml">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="xml">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"item"</span>&gt;</span></span></span><br><span class="line"><span class="xml">            <span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">"images/01.jpg"</span> <span class="attr">alt</span>=<span class="string">""</span>&gt;</span></span></span><br><span class="line"><span class="xml">            <span class="tag">&lt;<span class="name">p</span>&gt;</span>[特价款]雷朋板材光学镜架 <span class="tag">&lt;<span class="name">br</span>&gt;</span></span></span><br><span class="line"><span class="xml">            年终盛典 满128减30元<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span></span><br><span class="line"><span class="xml">            <span class="tag">&lt;<span class="name">span</span>&gt;</span>¥476.00<span class="tag">&lt;/<span class="name">span</span>&gt;</span> <span class="tag">&lt;<span class="name">u</span>&gt;</span>¥1360<span class="tag">&lt;/<span class="name">u</span>&gt;</span></span></span><br><span class="line"><span class="xml">            <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"hot"</span>&gt;</span></span></span><br><span class="line"><span class="xml">                <span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">"images/xsq.png"</span> <span class="attr">alt</span>=<span class="string">""</span>&gt;</span></span></span><br><span class="line"><span class="xml">            <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="xml">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="xml">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"item"</span>&gt;</span></span></span><br><span class="line"><span class="xml">            <span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">"images/01.jpg"</span> <span class="attr">alt</span>=<span class="string">""</span>&gt;</span></span></span><br><span class="line"><span class="xml">            <span class="tag">&lt;<span class="name">p</span>&gt;</span>[特价款]雷朋板材光学镜架 <span class="tag">&lt;<span class="name">br</span>&gt;</span></span></span><br><span class="line"><span class="xml">            年终盛典 满128减30元<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span></span><br><span class="line"><span class="xml">            <span class="tag">&lt;<span class="name">span</span>&gt;</span>¥476.00<span class="tag">&lt;/<span class="name">span</span>&gt;</span> <span class="tag">&lt;<span class="name">u</span>&gt;</span>¥1360<span class="tag">&lt;/<span class="name">u</span>&gt;</span></span></span><br><span class="line"><span class="xml">            <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"hot"</span>&gt;</span></span></span><br><span class="line"><span class="xml">                <span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">"images/xsq.png"</span> <span class="attr">alt</span>=<span class="string">""</span>&gt;</span></span></span><br><span class="line"><span class="xml">            <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="xml">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="xml">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"item"</span>&gt;</span></span></span><br><span class="line"><span class="xml">            <span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">"images/01.jpg"</span> <span class="attr">alt</span>=<span class="string">""</span>&gt;</span></span></span><br><span class="line"><span class="xml">            <span class="tag">&lt;<span class="name">p</span>&gt;</span>[特价款]雷朋板材光学镜架 <span class="tag">&lt;<span class="name">br</span>&gt;</span></span></span><br><span class="line"><span class="xml">            年终盛典 满128减30元<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span></span><br><span class="line"><span class="xml">            <span class="tag">&lt;<span class="name">span</span>&gt;</span>¥476.00<span class="tag">&lt;/<span class="name">span</span>&gt;</span> <span class="tag">&lt;<span class="name">u</span>&gt;</span>¥1360<span class="tag">&lt;/<span class="name">u</span>&gt;</span></span></span><br><span class="line"><span class="xml">            <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"hot"</span>&gt;</span></span></span><br><span class="line"><span class="xml">                <span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">"images/xsq.png"</span> <span class="attr">alt</span>=<span class="string">""</span>&gt;</span></span></span><br><span class="line"><span class="xml">            <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="xml">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="xml"></span></span><br><span class="line"><span class="xml">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">style</span>=<span class="string">"clear: both;"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="xml">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="xml"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span></span><br><span class="line"><span class="xml"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span></span><br></pre></td></tr></table></figure>

<div style="display:none">
#### <div id="title">常见的网站布局

<p><img src="https://s2.ax1x.com/old/FZgtP.png" alt="FZgtP.png"></p>
<figure class="highlight htmlbars"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br></pre></td><td class="code"><pre><span class="line"><span class="xml"><span class="meta">&lt;!DOCTYPE html&gt;</span></span></span><br><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></span></span><br><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span></span><br><span class="line"><span class="xml">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></span></span><br><span class="line"><span class="xml">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>Title<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span></span><br><span class="line"><span class="xml">    <span class="tag">&lt;<span class="name">style</span>&gt;</span></span></span><br><span class="line"><span class="xml">        *&#123;</span></span><br><span class="line"><span class="xml">            margin:0;</span></span><br><span class="line"><span class="xml">        &#125;</span></span><br><span class="line"><span class="xml">        .left&#123;</span></span><br><span class="line"><span class="xml">            float: left;</span></span><br><span class="line"><span class="xml">        &#125;</span></span><br><span class="line"><span class="xml">        .right&#123;</span></span><br><span class="line"><span class="xml">            float: right;</span></span><br><span class="line"><span class="xml">        &#125;</span></span><br><span class="line"><span class="xml">        .pg-header&#123;</span></span><br><span class="line"><span class="xml">            background-color: #2459a2;</span></span><br><span class="line"><span class="xml">            height:48px;</span></span><br><span class="line"><span class="xml">            line-height: 48px;</span></span><br><span class="line"><span class="xml">        &#125;</span></span><br><span class="line"><span class="xml">        .pg-left&#123;</span></span><br><span class="line"><span class="xml">            background-color: #666666;</span></span><br><span class="line"><span class="xml">            width:10%;</span></span><br><span class="line"><span class="xml">            position: fixed;</span></span><br><span class="line"><span class="xml">            top:48px;</span></span><br><span class="line"><span class="xml">            bottom:0;</span></span><br><span class="line"><span class="xml">            left:0;</span></span><br><span class="line"><span class="xml">        &#125;</span></span><br><span class="line"><span class="xml">        .pg-content&#123;</span></span><br><span class="line"><span class="xml">            background-color: wheat;</span></span><br><span class="line"><span class="xml">            width:90%;</span></span><br><span class="line"><span class="xml">            position: fixed;</span></span><br><span class="line"><span class="xml">            top:48px;</span></span><br><span class="line"><span class="xml">            bottom:0;</span></span><br><span class="line"><span class="xml">            left:10%;</span></span><br><span class="line"><span class="xml">            right:0;</span></span><br><span class="line"><span class="xml">            overflow: auto;</span></span><br><span class="line"><span class="xml">        &#125;</span></span><br><span class="line"><span class="xml"></span></span><br><span class="line"><span class="xml">        .pg-header .logo&#123;</span></span><br><span class="line"><span class="xml">            color: white;</span></span><br><span class="line"><span class="xml">            width:10%;</span></span><br><span class="line"><span class="xml">            background-color: #204982;</span></span><br><span class="line"><span class="xml">            text-align: center;</span></span><br><span class="line"><span class="xml">        &#125;</span></span><br><span class="line"><span class="xml"></span></span><br><span class="line"><span class="xml">        .pg-header .userinfo&#123;</span></span><br><span class="line"><span class="xml">            width:150px;</span></span><br><span class="line"><span class="xml">            margin-top: 4px;</span></span><br><span class="line"><span class="xml">        &#125;</span></span><br><span class="line"><span class="xml">        .pg-header .userinfo .infolist&#123;</span></span><br><span class="line"><span class="xml">            background-color:red;position: absolute;top:44px;right: 20px;z-index:10;</span></span><br><span class="line"><span class="xml">            display: none;</span></span><br><span class="line"><span class="xml">        &#125;</span></span><br><span class="line"><span class="xml">        .pg-header .userinfo:hover .infolist&#123;</span></span><br><span class="line"><span class="xml">            background-color: #204982;</span></span><br><span class="line"><span class="xml">            display: block;</span></span><br><span class="line"><span class="xml">        &#125;</span></span><br><span class="line"><span class="xml">        .pg-header .userinfo img&#123;</span></span><br><span class="line"><span class="xml">            border-radius: 50%;</span></span><br><span class="line"><span class="xml">        &#125;</span></span><br><span class="line"><span class="xml">        .pg-header .userinfo a&#123;</span></span><br><span class="line"><span class="xml">            display: block;</span></span><br><span class="line"><span class="xml">            width:160px;</span></span><br><span class="line"><span class="xml">            color:white;</span></span><br><span class="line"><span class="xml">        &#125;</span></span><br><span class="line"><span class="xml">    <span class="tag">&lt;/<span class="name">style</span>&gt;</span></span></span><br><span class="line"><span class="xml"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span></span><br><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span></span><br><span class="line"><span class="xml">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"pg-header"</span>&gt;</span></span></span><br><span class="line"><span class="xml"></span></span><br><span class="line"><span class="xml">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"logo left"</span>&gt;</span></span></span><br><span class="line"><span class="xml">            <span class="tag">&lt;<span class="name">span</span>&gt;</span>欢迎光临<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span></span><br><span class="line"><span class="xml">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="xml"></span></span><br><span class="line"><span class="xml">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"userinfo right"</span> <span class="attr">style</span>=<span class="string">"position: relative;"</span>&gt;</span></span></span><br><span class="line"><span class="xml">            <span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">"3.jpg"</span> <span class="attr">alt</span>=<span class="string">""</span> <span class="attr">style</span>=<span class="string">"width: 40px;height: 40px;"</span>&gt;</span></span></span><br><span class="line"><span class="xml">            <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"infolist"</span>&gt;</span></span></span><br><span class="line"><span class="xml">                <span class="tag">&lt;<span class="name">a</span>&gt;</span>我的信息<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span></span><br><span class="line"><span class="xml">                <span class="tag">&lt;<span class="name">a</span>&gt;</span>退出<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span></span><br><span class="line"><span class="xml">            <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="xml">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="xml"></span></span><br><span class="line"><span class="xml">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="xml"></span></span><br><span class="line"><span class="xml">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"pg-body"</span>&gt;</span></span></span><br><span class="line"><span class="xml">         <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"pg-left left"</span>&gt;</span></span></span><br><span class="line"><span class="xml">            这是菜单页面</span></span><br><span class="line"><span class="xml">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="xml">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"pg-content left"</span>&gt;</span></span></span><br><span class="line"><span class="xml">            这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span></span></span><br><span class="line"><span class="xml">            这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span></span></span><br><span class="line"><span class="xml">            这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span></span></span><br><span class="line"><span class="xml">            这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span></span></span><br><span class="line"><span class="xml">            这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span></span></span><br><span class="line"><span class="xml">            这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span></span></span><br><span class="line"><span class="xml">            这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span></span></span><br><span class="line"><span class="xml">            这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span></span></span><br><span class="line"><span class="xml">            这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span></span></span><br><span class="line"><span class="xml">            这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span></span></span><br><span class="line"><span class="xml">            这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span></span></span><br><span class="line"><span class="xml">            这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span></span></span><br><span class="line"><span class="xml">            这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span></span></span><br><span class="line"><span class="xml">            这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span></span></span><br><span class="line"><span class="xml">            这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span></span></span><br><span class="line"><span class="xml">            这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span></span></span><br><span class="line"><span class="xml">            这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span></span></span><br><span class="line"><span class="xml">            这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span></span></span><br><span class="line"><span class="xml">            这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span></span></span><br><span class="line"><span class="xml">            这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span></span></span><br><span class="line"><span class="xml">            这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span></span></span><br><span class="line"><span class="xml">            这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span></span></span><br><span class="line"><span class="xml">            这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span></span></span><br><span class="line"><span class="xml">            这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span></span></span><br><span class="line"><span class="xml">            这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是内容页面<span class="tag">&lt;<span class="name">p</span>&gt;</span></span></span><br><span class="line"><span class="xml">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="xml">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="xml"></span></span><br><span class="line"><span class="xml"></span></span><br><span class="line"><span class="xml">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"pg-foot"</span>&gt;</span></span></span><br><span class="line"><span class="xml">        这是最底页面</span></span><br><span class="line"><span class="xml">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="xml"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span></span><br><span class="line"><span class="xml"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span></span><br></pre></td></tr></table></figure>

</div>


</div>
    </div>

  </article>
  <div class="toc-container">
    
  <div id="toc" class="toc-article">
    <strong class="toc-title">目录</strong>
    <ol class="toc"><li class="toc-item toc-level-4"><a class="toc-link" href="#网页布局的三个阶段和CSS的基本概念"><span class="toc-text">网页布局的三个阶段和CSS的基本概念</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#CSS的语法结构"><span class="toc-text">CSS的语法结构</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#CSS的三种引入方式"><span class="toc-text">CSS的三种引入方式</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#CSS常见选择器"><span class="toc-text">CSS常见选择器</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#段落-文本-属性和边框以及背景属性"><span class="toc-text">段落(文本)属性和边框以及背景属性</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#布局属性"><span class="toc-text"> 布局属性</span></a></li></ol>
  </div>


  </div>
</div>
<script type="text/javascript" src="//rf.revolvermaps.com/0/0/8.js?i=5sr5du46f27&amp;m=0&amp;c=ff0000&amp;cr1=ffffff&amp;f=arial&amp;l=33" async="async"></script>
<div class="copyright">
    <span>本作品采用</span>
    <a href="https://creativecommons.org/licenses/by/4.0/">知识共享署名 4.0 国际许可协议</a>
    <span>进行许可。 转载时请注明原文链接。</span>
</div>


  
    <div class="post-nav" style="margin-left:-168px;">
      <div class="post-nav-item post-nav-next">
        
          <span>〈 </span>
          <a href="/2017/05/07/Python编码中出现的问题/" rel="next" title="python编码">
          python编码
          </a>
        
      </div>
  
      <div class="post-nav-item post-nav-prev">
          
          <a href="/2017/05/07/DOM操作/" rel="prev" title="DOM操作">
            DOM操作
          </a>
          <span>〉</span>
        
      </div>
    </div>
  


	
	<div style="width:109%; margin-left:-144px" id="lv-container" data-id="city" data-uid="MTAyMC80OTg5NS8yNjM4Ng==">
	<script type="text/javascript">
   	   (function(d, s) {
       		var j, e = d.getElementsByTagName(s)[0];

       		if (typeof LivereTower === 'function') { return; }

       		j = d.createElement(s);
       		j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
       		j.async = true;

       		e.parentNode.insertBefore(j, e);
   	   })(document, 'script');
	</script>
	<noscript> 为正常使用来必力评论功能请激活JavaScript</noscript>
        </div>
	



    </div>

    

  </div>
  <footer class="footer text-center">
    <div id="bottom-inner">
        <a class="bottom-item" href target="_blank">GitHub</a> |
        <a class="bottom-item" href>友情链接</a> |
        <a class="bottom-item" href="https://hexo.io" target="_blank">Powered by hexo</a> |
        <a class="bottom-item" href="https://github.com/fooying/hexo-theme-xoxo-plus" target="_blank">Theme xoxo-plus</a> |
        <a class="bottom-item" href="/atom.xml">订阅</a>
    </div>
</footer>

  

<script>
  (function(window, document, undefined) {

    var timer = null;

    function returnTop() {
      cancelAnimationFrame(timer);
      timer = requestAnimationFrame(function fn() {
        var oTop = document.body.scrollTop || document.documentElement.scrollTop;
        if (oTop > 0) {
          document.body.scrollTop = document.documentElement.scrollTop = oTop - 50;
          timer = requestAnimationFrame(fn);
        } else {
          cancelAnimationFrame(timer);
        }
      });
    }

    var hearts = [];
    window.requestAnimationFrame = (function() {
      return window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        function(callback) {
          setTimeout(callback, 1000 / 60);
        }
    })();
    init();

    function init() {
      css(".heart{z-index:9999;width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}");
      attachEvent();
      gameloop();
      addMenuEvent();
    }

    function gameloop() {
      for (var i = 0; i < hearts.length; i++) {
        if (hearts[i].alpha <= 0) {
          document.body.removeChild(hearts[i].el);
          hearts.splice(i, 1);
          continue;
        }
        hearts[i].y--;
        hearts[i].scale += 0.004;
        hearts[i].alpha -= 0.013;
        hearts[i].el.style.cssText = "left:" + hearts[i].x + "px;top:" + hearts[i].y + "px;opacity:" + hearts[i].alpha + ";transform:scale(" + hearts[i].scale + "," + hearts[i].scale + ") rotate(45deg);background:" + hearts[i].color;
      }
      requestAnimationFrame(gameloop);
    }

    /**
     * 给logo设置点击事件
     * 
     * - 回到顶部
     * - 出现爱心
     */
    function attachEvent() {
      var old = typeof window.onclick === "function" && window.onclick;
      var logo = document.getElementById("logo");
      if (logo) {
        logo.onclick = function(event) {
          returnTop();
          old && old();
          createHeart(event);
        }
      }
      
    }

    function createHeart(event) {
      var d = document.createElement("div");
      d.className = "heart";
      hearts.push({
        el: d,
        x: event.clientX - 5,
        y: event.clientY - 5,
        scale: 1,
        alpha: 1,
        color: randomColor()
      });
      document.body.appendChild(d);
    }

    function css(css) {
      var style = document.createElement("style");
      style.type = "text/css";
      try {
        style.appendChild(document.createTextNode(css));
      } catch (ex) {
        style.styleSheet.cssText = css;
      }
      document.getElementsByTagName('head')[0].appendChild(style);
    }

    function randomColor() {
      // return "rgb(" + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + ")";
      return "#F44336";
    }

    function addMenuEvent() {
      var menu = document.getElementById('menu-main-post');
      if (menu) {
        var toc = document.getElementById('toc');
        if (toc) {
          menu.onclick = function() {
            if (toc) {
              if (toc.style.display == 'block') {
                toc.style.display = 'none';
              } else {
                toc.style.display = 'block';
              }
            }
          };
        } else {
          menu.style.display = 'none';
        }
      }
    }

  })(window, document);
</script>

  



  

</body>
</html>
